<template>
	<view class="container">
		<!-- 固定表头 -->
		<view class="list-header">
			<text class="header-item" style="width: 16%">名称</text>
			<text class="header-item" style="width: 13%">货道</text>
			<text class="header-item" style="width: 13%">数量</text>
			<text class="header-item" style="width: 13%">类型</text>
			<text class="header-item" style="width: 16%">操作人</text>
			<text class="header-item" style="width: 28%">操作时间</text>
		</view>

		<!-- 可滚动的列表内容 -->
		<scroll-view 
			class="inventory-list-scroll" 
			scroll-y="true" 
			@scrolltolower="loadMore" 
			refresher-enabled
			:refresher-triggered="refreshing" 
			@refresherrefresh="onRefresh"
			:style="{height: scrollHeight + 'px'}"
		>
			<view class="list-content">
				<view class="list-item" v-for="(item, index) in filteredList" :key="index">
					<text class="item-column location" style="width: 16%">{{ item.material_name || '-' }}</text>
					<text class="item-column stock" style="width: 13%">{{ item.identification || '-' }}</text>
					<text class="item-column stock" style="width: 13%">{{ item.opnum || 0 }}</text>
					<text class="item-column stock" style="width: 13%">{{ operationtypeText(item.operationtype) }}</text>
					<text class="item-column stock" style="width: 16%">{{ item.full_name || '-' }}</text>
					<text class="item-column time" style="width: 28%">{{ item.create_time }}</text>
				</view>
			</view>

			<!-- 加载更多提示 -->
			<view class="load-more">
				<text v-if="loading">加载中...</text>
				<text v-else-if="noMore">没有更多数据了</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	const API = require("../../utils/apiConfig.js");
	export default {
		data() {
			return {
				searchKeyword: '',
				pageIndex: 1,
				pageSize: 20,
				total: 0,
				operationSelectRange: [],
				operationSelectValue: {},
				list: [],
				refreshing: false, // 下拉刷新状态
				loading: false, // 上拉加载状态
				noMore: false, // 是否没有更多数据
				scrollHeight: 0 // 滚动区域高度
			}
		},
		onShow() {
			this.operationlist();
			this.calculateScrollHeight();
		},
		onReady() {
			// 确保页面渲染完成后计算高度
			this.calculateScrollHeight();
		},
		computed: {
			// 过滤后的列表
			filteredList() {
				if (!this.searchKeyword) return this.list;
				const keyword = this.searchKeyword.toLowerCase();
				return this.list.filter(item =>
					(item.material_name && item.material_name.toLowerCase().includes(keyword)) ||
					(item.identification && item.identification.toLowerCase().includes(keyword))
				);
			}
		},
		methods: {
			// 计算滚动区域高度
			calculateScrollHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.container').boundingClientRect(data => {
					if (data) {
						query.select('.list-header').boundingClientRect(headerData => {
							if (headerData) {
								this.scrollHeight = data.height - headerData.height;
							}
						}).exec();
					}
				}).exec();
			},
			operationlist() {
				API.operationlist({}).then((res) => {
					console.log("operationlist res  " + JSON.stringify(res));
					if (res.code == 0) {
						this.operationSelectRange = res.data;
						this.takereturnlog('refresh');
					}
				})
			},
			operationtypeText(type) {
				let data = this.operationSelectRange.find((item) => {
					return item.value == type;
				});
				return data ? data.name : '';
			},
			takereturnlog(type) {
				if (type == 'refresh') {
					this.pageIndex = 1;
					this.noMore = false;
				}

				if (this.loading || this.noMore) return;

				this.loading = true;

				API.takereturnlog({
					page: this.pageIndex,
					rows: this.pageSize,
					operationtype: this.operationSelectValue.value
				}).then((res) => {
					console.log("res  " + JSON.stringify(res));

					if (type == 'refresh') {
						this.list = res.data.list || [];
					} else {
						this.list = [...this.list, ...(res.data.list || [])];
					}

					this.total = res.data.total || 0;

					// 判断是否还有更多数据
					if (res.data.list && res.data.list.length < this.pageSize) {
						this.noMore = true;
					} else {
						this.noMore = false;
					}

					// 如果是刷新操作，重置页码
					if (type === 'refresh') {
						this.pageIndex = 1;
					}
				}).finally(() => {
					this.loading = false;
					this.refreshing = false;
				})
			},
			// 下拉刷新
			onRefresh() {
				if (this.refreshing) return;
				this.refreshing = true;
				this.takereturnlog('refresh');
			},
			// 上拉加载更多
			loadMore() {
				if (this.loading || this.noMore) return;
				this.pageIndex++;
				this.takereturnlog('loadmore');
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f5f5;
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	/* 固定表头样式 */
	.list-header {
		display: flex;
		background-color: #333847;
		padding: 12px 0;
		position: sticky;
		top: 0;
		z-index: 999;
		width: 100%;
	}

	.header-item {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 14px;
		color: #fff;
		padding: 0 5px;
	}

	/* 滚动区域 */
	.inventory-list-scroll {
		width: 100%;
		flex: 1;
		overflow: hidden;
		background-color: #fff;
	}

	.list-content {
		padding-top: 1px; /* 确保第一条可见 */
	}

	.list-item {
		display: flex;
		padding: 12px 0;
		border-bottom: 1px solid #f0f0f0;
		align-items: center;
	}

	.item-column {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 14px;
		padding: 0 5px;
		word-break: break-word;
	}

	.name {
		color: #333;
	}

	.location {
		color: #666;
	}

	.stock {
		color: #333;
	}

	.time {
		color: #666;
		white-space: normal;
		word-break: break-all;
		line-height: 1.4;
		padding: 5px;
	}

	/* 加载更多样式 */
	.load-more {
		text-align: center;
		padding: 15rpx 0;
		color: #999;
		font-size: 26rpx;
	}
</style>